<template>
  <view class="container">
    <view class="logo-area">
      <image class="logo" src="/static/logo.png"></image>
      <text class="app-name">漫展摄影</text>
    </view>

    <view class="form-area">
      <view class="input-group">
        <text class="input-label">手机号</text>
        <input class="input" type="number" placeholder="请输入手机号" v-model="phone" />
      </view>

      <view class="input-group">
        <text class="input-label">密码</text>
        <input class="input" type="password" placeholder="请输入密码" v-model="password" />
      </view>

      <view class="forgot-password">
        <text>忘记密码?</text>
      </view>

      <button class="login-btn" @tap="login">登录</button>

      <view class="register-link">
        <text>还没有账号？</text>
        <text class="link" @tap="goToRegister">立即注册</text>
      </view>
    </view>

    <view class="other-login">
      <text class="divider">其他登录方式</text>
      <view class="social-icons">
        <view class="social-icon">
          <text>微信</text>
        </view>
        <view class="social-icon">
          <text>QQ</text>
        </view>
        <view class="social-icon">
          <text>微博</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      phone: '',
      password: ''
    }
  },
  methods: {
    login() {
      if (!this.phone || !this.password) {
        uni.showToast({
          title: '请输入手机号和密码',
          icon: 'none'
        });
        return;
      }
      
      // 模拟登录
      uni.showLoading({
        title: '登录中...'
      });
      
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: '登录成功',
          icon: 'success'
        });
        
        // 跳转到首页
        setTimeout(() => {
          uni.switchTab({
            url: '/pages/index/index'
          });
        }, 1500);
      }, 2000);
    },
    goToRegister() {
      uni.navigateTo({
        url: '/pages/register/register'
      });
    }
  }
}
</script>

<style>
.container {
  padding: 40rpx;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #fff;
}

.logo-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 80rpx;
  margin-bottom: 80rpx;
}

.logo {
  width: 160rpx;
  height: 160rpx;
  margin-bottom: 20rpx;
}

.app-name {
  font-size: 40rpx;
  font-weight: bold;
  color: #8B5CF6;
}

.form-area {
  margin-bottom: 60rpx;
}

.input-group {
  margin-bottom: 30rpx;
}

.input-label {
  font-size: 28rpx;
  color: #4B5563;
  margin-bottom: 10rpx;
  display: block;
}

.input {
  width: 100%;
  height: 90rpx;
  border: 1rpx solid #D1D5DB;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
}

.forgot-password {
  text-align: right;
  font-size: 24rpx;
  color: #6B7280;
  margin-bottom: 40rpx;
}

.login-btn {
  width: 100%;
  height: 90rpx;
  background-color: #8B5CF6;
  color: #fff;
  border-radius: 8rpx;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30rpx;
}

.register-link {
  display: flex;
  justify-content: center;
  font-size: 28rpx;
  color: #6B7280;
}

.link {
  color: #8B5CF6;
  margin-left: 10rpx;
}

.other-login {
  margin-top: auto;
  margin-bottom: 60rpx;
}

.divider {
  position: relative;
  text-align: center;
  font-size: 24rpx;
  color: #9CA3AF;
  margin-bottom: 40rpx;
}

.divider::before,
.divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 30%;
  height: 1rpx;
  background-color: #E5E7EB;
}

.divider::before {
  left: 0;
}

.divider::after {
  right: 0;
}

.social-icons {
  display: flex;
  justify-content: space-around;
}

.social-icon {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  border: 1rpx solid #E5E7EB;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  color: #6B7280;
}
</style>